<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link href="/resource/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/resource/js/bootstrap.min.js"></script>

<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<h1>添加页面</h1>
	<form id="specForm">
	<div class="container">
	<div class="row">
	<div class="col-md-5">
	<label for="inputPassword2" class="sr-only">Password</label> <input type="text" name="specName" class="form-control" id="inputPassword2" placeholder="请输入规格名称">
						<button type="button" class="btn btn-primary mb-2" onclick="addLines()">添一行</button>
	</div>
	<div class="col-md-7" id="lineId">
	<div class="form-group mx-sm-3 mb-2">
						<label for="inputPassword2" class="sr-only"></label> <input type="text" name="optionList[0].optionName" class="form-control" id="inputPassword2" placeholder="规格选项名">
						<label for="inputPassword2" class="sr-only"></label> <input type="number" name="optionList[0].orders" class="form-control" id="inputPassword2" placeholder="排序">
						<button type="button" class="btn btn-danger" onclick="delLines($(this))">删除一行</button>
					</div>
	</div>
	
	</div>
	
	
	</div>
	
	
	
	<button type="button" onclick="sbmForm()" class="btn btn-primary mb-2">添加</button>
	</form>
	<script type="text/javascript">
	//添加提交表单
	function sbmForm(){
		$.post("./spec/add",$("#specForm").serialize(),function(resp){
			if(resp){
				alert("success");
				$("#workArea").load("./spec/list");
			}else{
				alert("fail!!")
			}

		})
			
	}
	

// 删除一行
	function delLines(obj){
		obj.parent().remove();
	}


	var index =1;
//	添加一行
	function addLines(){

		$("#lineId").append('<div class="form-group mx-sm-3 mb-2">'+
				'<label for="inputPassword2" class="sr-only">Password</label> <input type="text" name="optionList['+index+'].optionName" class="form-control" id="inputPassword2" placeholder="规格选项名">'+
				'<label for="inputPassword2" class="sr-only">Password</label> <input type="number" name="optionList['+index+'].orders" class="form-control" id="inputPassword2" placeholder="排序">'+
				'<button type="button" class="btn btn-danger" onclick="delLines($(this))">删除一行</button>'+
			'</div>')
		index++;
	}

	
	</script>
</body>
</html>